<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const chatItemList = ref([] as any)

const chatForm = ref({
  roleA: '林黛玉',
  roleB: '鲁智深',
  roleAProfile: '林黛玉是一个多愁善感的人物，她容易感到孤独和寂寞，并对自己的处境有深刻的认识。初入贾府，她明白自己虽然是贾母的外孙女，但终究不是真正的贾府成员，她的生活如同寄人篱下。这种敏感的性格使她在面对不利情况时只能自哀自叹。在爱情中，宝钗和宝玉的“金玉之说”让她感到威胁，而贾府的变故和封建家长的手段更是加重了她的忧愁。这种多愁善感的性格不仅表现在对身世的感慨，还表现在对花草树木的哀伤中，她能细腻地体会它们的命运，感叹生命的短暂和万物的消散。',
  roleBProfile: '鲁智深以豪爽仗义著称。他不仅慷慨大方，重义疏财，对待金家父女时，即使与他们无任何关系，也主动提出给予他们盘缠。当发现李忠不仗义时，他更是直接将李忠的银子丢还。这些行为都展现了他对正义的坚守和对朋友的深厚情谊。他的仗义疏财不仅赢得了良好的群众基础，还对江湖好汉具有巨大的号召力。',
  chatTopic: '孙悟空为什么老去找菩萨帮忙'
})

const startChat = async () => {
  chatItemList.value.push({
    role: 'roleA',
    content: `请以“${ chatForm.value.chatTopic }”为主题，开始对话`
  })
  for (let i = 1; i <= 20; i++) {
    const chatContent = await axios.post(`/api/sse`, {
      ...(i % 2 === 1 ? buildRoleAChat() : buildRoleBChat())
    },{ timeout: 10 * 60 * 1000 }) as any;
    console.log(chatContent)
    chatItemList.value.push({
      role: i % 2 === 1 ? 'roleA' : 'roleB',
      content: chatContent.data.data.choices[0].content.replaceAll('\\n', '').replaceAll('\\', '').replaceAll('"', '')
    })
  }
}

const sendMessage = async (params: any) => {

}

const buildRoleAChat = () => {
  const prompt = []
  prompt.push(...chatItemList.value.map(e => {
    return {
      role: e.role === 'roleA' ? 'user' : 'assistant',
      content: e.content
    }
  }))
  return {
    prompt: prompt,
    meta: {
      user_name: chatForm.value.roleA,
      user_info: chatForm.value.roleAProfile,
      bot_name: chatForm.value.roleB,
      bot_info: chatForm.value.roleBProfile
    }
  }
}

const buildRoleBChat = () => {
  const prompt = []
  prompt.push(...chatItemList.value.map(e => {
    return {
      role: e.role === 'roleA' ? 'assistant' : 'user',
      content: e.content
    }
  }))
  return {
    prompt: prompt,
    meta: {
      user_name: chatForm.value.roleB,
      user_info: chatForm.value.roleBProfile,
      bot_name: chatForm.value.roleA,
      bot_info: chatForm.value.roleAProfile
    }
  }
}

</script>

<template>
  <div class="container">
    <el-form :model="chatForm" label-width="100px">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色A">
            <el-input v-model="chatForm.roleA"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色B">
            <el-input v-model="chatForm.roleB"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色A人设">
            <el-input v-model="chatForm.roleAProfile" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色B人设">
            <el-input v-model="chatForm.roleBProfile" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 聊天主题 -->
      <el-form-item label="聊天主题">
        <el-input v-model="chatForm.chatTopic" type="textarea"></el-input>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="startChat">开始聊天</el-button>
      </el-form-item>
    </el-form>
    <div class="chat-container">
      <div class="chat-item-wrapper">
        <div
            class="chat-item"
            v-for="(item, index) in chatItemList"
            :key="index">
          <div class="chat-item-avatar" v-if="index !== 0">
            <img v-if="item.role === 'roleA'" src="@/assets/images/chat-user.png" alt="user"/>
            <img v-else src="@/assets/images/chat-ai.png" alt="assistant"/>
          </div>
          <div  v-if="index !== 0" :class="{'chat-item-text': true, 'chat-item-text-user' : item.role === 'roleA'}">
            <div class="chat-item-content">
              {{ item.content }}
            </div>
            <div class="chat-item-tools">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.container {
  height: 100%;
  width: 100%;
  padding: 10px;
}
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 350px);
  padding-bottom: 10px;
  overflow-x: hidden;
}
.chat-item-wrapper {
  flex-grow: 1;
  padding: 10px 10% 0 10%;
  overflow: scroll;
  max-height: calc(100vh - 60px - 40px - 30px);
}
.recommend-item img {
  width: 100px !important;
  height: 150px !important;;
}
.chat-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}
.chat-item-avatar {
  width: 40px;
}
.chat-item-avatar img {
  width: 32px;
  height: 32px;
}
.chat-item-text {
  flex-grow: 1;
  margin-left: 10px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
  padding: 5px;
}
.chat-item-text-user {
  box-shadow: none;
}
.greeting {
  width: 100%;
  text-align: center;
  margin-top: 5px
}
.greeting div:nth-child(1) {
  font-size: 20px;
  font-weight: bolder;
}
.greeting div:nth-child(2){
  font-size: 16px;
  line-height: 2em;
}
.chat-item-recommend {
  margin-top: 5px;
}
.chat-question-wrapper {
  padding: 5px;
  min-height: 50px;
  max-height: 200px;
  display: flex;
  justify-content: center; /* 水平居中 */
}

.chat-input-wrapper {
  width: 80%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  max-height: 200px;
}
:deep(.el-textarea__inner) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  resize: none;
  cursor: default;
  max-height: 200px;
  padding-right: 60px;
}
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 0;
}
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 0;
}
.question-submit-button {
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.chat-item-tools {
  float: right;
}
</style>